import { onBeforeMount, onMounted, ref } from "vue"
import usePageInfo from "@/stores/pageInfo"
import { storeToRefs } from "pinia"

export default function () {
  // 侧边栏收缩
  const show = ref(false)
  // 仓库
  const pageInfo = usePageInfo()

  // 绑定屏幕大小监听事件
  onMounted(() => {
    if (window.innerWidth > 800) {
      show.value = true
      // 将仓库屏幕变为大屏模式
      pageInfo.bigScreen = true
    }
    if (window.innerWidth <= 800) {
      show.value = false
      // 将仓库屏幕变为大屏模式
      pageInfo.bigScreen = false
    }

    window.onresize = () => {
      if (window.innerWidth <= 800) {
        show.value = false
        // 将仓库屏幕变为大屏模式
        pageInfo.bigScreen = false
      }
      if (window.innerWidth > 800) {
        show.value = true
        // 将仓库屏幕变为大屏模式
        pageInfo.bigScreen = true
      }
    }
  })

  onBeforeMount(() => {
    // 组件摧毁后销毁监听事件
    window.onresize = null
  })

  return show
}
